import React, {FC, useEffect, useState} from 'react'
import {
	Form,
	Row,
	Col,
	Input,
	Select,
	TreeSelect,
	Cascader,
	Tooltip,
} from 'antd'
import validator from 'validator'
import {QuestionCircleOutlined} from '@ant-design/icons'
import {getAllCitys} from '@/service/common/index'
// import {translateDataToTree} from '@/utils/common/index'
// import {getDeptList} from '@/service/system/dept'
import {PageType} from '../constant'
import styles from './index.less'

interface FleetInfoType {
	fleetInfoForm: any
	pageType: any
	dict: Record<string, any>
	detailRecrod: Record<string, any>
	companyData: any[]
}
// type TreeItem = {
// 	id: string
// 	parentId: number
// 	name: string
// 	children?: Array<TreeItem>
// }[]

type OtherParams = {
	requisitionName?: string
	requisitionOrgname?: string
	purchaserName?: string
	contractTypename?: string
	supplierName?: string
	supplierNo?: string
	startTime?: string
	finishTime?: string
}

// 城市
const cityNames = {
	label: 'name',
	value: 'id',
	children: 'cityInfoList',
}

interface CityOption {
	value: string | number
	label: string
	children?: CityOption[]
}

// 申请部门与项目申请人
const deptAddUserNames = {
	label: 'name',
	value: 'id',
	key: 'id',
}

const fleetInfo: FC<FleetInfoType> = ({
	fleetInfoForm,
	pageType,
	dict,
	detailRecrod,
	companyData,
}) => {
	const [citysList, setCitysList] = useState<CityOption[]>([])
	// const [orgList, setOrgList] = useState<TreeItem>([])
	const [otherParams, setOtherParams] = useState<OtherParams>()

	// 初始化表单
	const initForm = () => {
		if (pageType !== PageType.Add && detailRecrod) {
			const obj = {
				cityId: [detailRecrod.provinceId, detailRecrod.cityId],
				affiliatedCompanyId: detailRecrod.affiliatedCompanyId,
				companyType: detailRecrod.companyType,
				fleetName: detailRecrod.fleetName,
				captainName: detailRecrod.captainName,
				captainPhone: detailRecrod.captainPhone,
				captainEmail: detailRecrod.captainEmail,
				assistManager: detailRecrod.assistManager,
				assistManagerPhone: detailRecrod.assistManagerPhone,
				isNeedAdmin:
					detailRecrod.isNeedAdmin === undefined
						? '1'
						: String(detailRecrod.isNeedAdmin),
			}
			fleetInfoForm.setFieldsValue(obj)
		}
	}

	useEffect(() => {
		initForm()
	}, [detailRecrod])

	// 初始化-城市
	const getCitysFun = () => {
		getAllCitys().then((res: any) => {
			if (res?.data) {
				setCitysList(() => res.data)
			}
		})
	}

	// 初始化-需求组织数据
	// const getDeptFun = () => {
	// 	getDeptList({merchantId: 6}).then((res: any) => {
	// 		const list = translateDataToTree(res.data)
	// 		setOrgList(() => list as any)
	// 	})
	// }

	useEffect(() => {
		getCitysFun()
		// getDeptFun()
	}, [])

	const onCitysChange = (value: any, selectedOptions: any) => {
		if (value) {
			fleetInfoForm.setFieldsValue({
				...fleetInfoForm,
				applyCityid: selectedOptions[selectedOptions.length - 1].value,
				applyCityname:
					selectedOptions[selectedOptions.length - 1].label,
			})
		}
	}

	// 需求组织变化
	const onRequisitionOrgChange = (value: string, option: any) => {
		setOtherParams({...otherParams, requisitionOrgname: option[0]})
	}

	return (
		<div className={styles.fleetIno}>
			<div className={styles.titleBox}>车队信息</div>
			<div style={{padding: '12px 0 '}}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="fleetInfoForm"
					form={fleetInfoForm}
					disabled={pageType === PageType.Detail}>
					<Row>
						<Col span={8}>
							<Form.Item
								name="cityId"
								label="城市"
								rules={[{required: true}]}>
								{pageType !== PageType.Add ? (
									<Cascader
										fieldNames={cityNames}
										options={citysList}
										placeholder="请选择"
										onChange={onCitysChange}
										disabled
									/>
								) : (
									<Cascader
										fieldNames={cityNames}
										options={citysList}
										placeholder="请选择"
										onChange={onCitysChange}
										// disabled={PageType.Ddit === pageType}
									/>
								)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="affiliatedCompanyId"
								label="所属公司"
								rules={[{required: true}]}>
								{pageType === PageType.Detail ? (
									<TreeSelect
										showSearch
										style={{width: '100%'}}
										placeholder="请选择"
										fieldNames={deptAddUserNames}
										treeDefaultExpandAll
										treeData={companyData}
										onChange={onRequisitionOrgChange}
										disabled
									/>
								) : (
									<TreeSelect
										showSearch
										style={{width: '100%'}}
										placeholder="请选择"
										fieldNames={deptAddUserNames}
										treeDefaultExpandAll
										treeData={companyData}
										onChange={onRequisitionOrgChange}
										disabled={PageType.Ddit === pageType}
									/>
								)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="companyType"
								label="公司类型"
								rules={[{required: true}]}>
								{pageType === PageType.Detail ? (
									<Select
										disabled
										placeholder="请选择"
										options={(
											dict.Car_Company_Type || []
										).map((item: any) => ({
											label: item.dictValue,
											value: item.dictKey,
										}))}
									/>
								) : (
									<Select
										disabled={pageType === PageType.Ddit}
										placeholder="请选择"
										options={(
											dict.Car_Company_Type || []
										).map((item: any) => ({
											label: item.dictValue,
											value: item.dictKey,
										}))}
									/>
								)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="fleetName"
								label="车队名称"
								rules={[
									{required: true},
									{
										validator(rule, value) {
											if (
												value === undefined ||
												value.length === 0
											) {
												return Promise.resolve([''])
											}
											return value.length > 40
												? Promise.reject(
														new Error(
															'长度不能大于40',
														),
												  )
												: Promise.resolve([''])
										},
									},
								]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="captainName"
								label="车队长名称"
								rules={[
									{required: true},
									{
										validator(rule, value) {
											if (
												value === undefined ||
												value.length === 0
											) {
												return Promise.resolve('')
											}
											return value.length > 40
												? Promise.reject(
														new Error(
															'长度不能大于40',
														),
												  )
												: Promise.resolve('')
										},
									},
								]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="captainPhone"
								label="车队长手机号"
								rules={[
									{required: true},
									{
										validator(rule, value) {
											if (
												value === undefined ||
												value.length === 0
											) {
												return Promise.resolve('')
											}
											return validator.isMobilePhone(
												value,
												'zh-CN',
											)
												? Promise.resolve('')
												: Promise.reject(
														new Error(
															'请输入正确的手机号',
														),
												  )
										},
									},
								]}>
								<Input
									placeholder={
										pageType === PageType.Detail
											? ''
											: '请输入'
									}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="captainEmail"
								label="车队长邮箱"
								rules={[
									{
										validator(rule, value) {
											if (
												value === undefined ||
												value === null ||
												value.length === 0
											) {
												return Promise.resolve('')
											}
											return validator.isEmail(value)
												? Promise.resolve('')
												: Promise.reject(
														new Error(
															'请输入正确的邮箱',
														),
												  )
										},
									},
								]}>
								<Input
									placeholder={
										pageType === PageType.Detail
											? ''
											: '请输入'
									}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>{}</Col>
						<Col span={8}>{}</Col>
						<Col span={8}>
							<Form.Item
								name="assistManager"
								label="车队协助管理员">
								<Input
									placeholder={
										pageType === PageType.Detail
											? ''
											: '请输入'
									}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="assistManagerPhone"
								label="协管员手机号"
								rules={[
									{
										validator(rule, value) {
											if (!value) {
												return Promise.resolve('')
											}
											return validator.isMobilePhone(
												value,
												'zh-CN',
											)
												? Promise.resolve('')
												: Promise.reject(
														new Error(
															'请输入正确的手机号',
														),
												  )
										},
									},
								]}>
								<Input
									placeholder={
										pageType === PageType.Detail
											? ''
											: '请输入'
									}
								/>
							</Form.Item>
						</Col>
						<Col span={8}>{}</Col>
						<Col span={8}>
							<Form.Item
								name="isNeedAdmin"
								label="是否需要司管员">
								{pageType === PageType.Detail ? (
									<Select
										placeholder="请选择"
										disabled
										options={(dict.yes_no || []).map(
											(item: any) => ({
												label: item.dictValue,
												value: item.dictKey,
											}),
										)}
									/>
								) : (
									<Select
										placeholder="请选择"
										disabled={pageType === PageType.Ddit}
										options={(dict.yes_no || []).map(
											(item: any) => ({
												label: item.dictValue,
												value: item.dictKey,
											}),
										)}
									/>
								)}
							</Form.Item>
						</Col>
						<Col span={8}>
							<div className={styles.icon}>
								{PageType.Add === pageType && (
									<Tooltip
										title={
											<div>
												<div>
													选择是:则司机在司机端下单时,默认绑定车管人为当前车队长,同时会提醒司机继续选择绑定司管人员
												</div>
												<div>
													选择否:则司机在司机端下单时,默认绑定车管/司管为当前车队长
												</div>
											</div>
										}>
										<QuestionCircleOutlined />
									</Tooltip>
								)}
							</div>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}

export default fleetInfo
